<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <script src="https://checkout.stripe.com/checkout.js"></script>

        <button id="customButton">Purchase</button>
        
        <script>
        var handler = StripeCheckout.configure({
          key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
          image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
          
          token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
          }
        });
        
        document.getElementById('customButton').addEventListener('click', function(e) {
          // Open Checkout with further options:
          handler.open({
            name: 'Stripe.com',
            description: '2 widgets',
            zipCode: true,
            amount: 2000
          });
          e.preventDefault();
        });
        
        // Close Checkout on page navigation:
        window.addEventListener('popstate', function(e) {
            console.log("popstate",e, e.state);

            console.log("handler", handler);
        //   handler.close();
        });
        </script>
    
</body>
</html>